<template>
  <div class="main">
    <div class="left">
      <div class="flex">
        <div class="label">
          切换区域:
        </div>
        <el-cascader style="flex: 1;" :options="areaList" :props="props1" v-model="searchPids"
          @change="searchAreaChange" />
      </div>
      <el-input v-model="searchInfo.name" style="width: 100%" placeholder="">
        <template #append>
          <el-icon style="cursor: pointer;" @click="searchUnit">
            <Search />
          </el-icon>
        </template>
      </el-input>
      <div class="units">
        <el-tree style="width: 300px" default-expand-all :data="units" :props="defaultProps" @node-click="nodeClick" />
      </div>
    </div>
    <div class="right">
      <el-card class="card">
        <template #header>
          <div class="section-title">
            单位基本信息
          </div>
        </template>
        <div class="row">
          <div class="item">
            <div class="label">单位名称：</div>
            <div class="value"><span>{{ unitInfo.name }}</span>
              <span :class="unitInfo.reportStatus == 0 ? 'status1' : 'status2'">{{ unitInfo.reportStatus == 0 ? '未上报' :
                '已上报'
              }}</span>
            </div>
          </div>
          <div class="item">
            <div class="label">负责人：</div>
            <div class="value">{{ unitInfo.leader }}</div>
          </div>
        </div>
        <div class="row">
          <div class="item">
            <div class="label">单位地址：</div>
            <div class="value">{{ unitInfo.address }}</div>
          </div>
          <div class="item">
            <div class="label">单位类别：</div>
            <div class="value">{{ unitInfo.unitTypeNmae }}</div>
          </div>
        </div>
        <div class="row">
          <div class="item">
            <div class="label">三定人数：</div>
            <div class="value" style="color: #4E7DF7;cursor: pointer;" @click="openBz">{{ unitInfo.thirdNums }}人</div>
          </div>
          <div class="item">
            <div class="label">实有人数：</div>
            <div class="value" style="color: #4E7DF7;cursor: pointer;" @click="openBz">{{ unitInfo.realNums }}人</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <template #header>
          <div class="flex">
            <div class="section-title">
              单位办公楼信息
            </div>
            <div class="btn90" @click="addUnit">
              人员清单
            </div>
          </div>
        </template>
        <div class="table">
          <el-table :data="bglData" row-key="id">
            <el-table-column align="left" label="办公楼名称" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="办公楼地址" prop="areaAddress" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="建筑面积" prop="totalArea"></el-table-column>
            <el-table-column align="left" label="层数" prop="totalFloor"></el-table-column>
            <el-table-column align="left" label="产权" prop="ownership" show-overflow-tooltip>
              <template #default="scope">
                <span> {{ qsdjList[scope.row.ownership - 1].name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" fixed="right" label="操作" min-width="120">
              <template #default="scope">
                <el-button type="primary" link icon="edit" @click="openCard(scope.row)">
                  查看卡片
                </el-button>
                <el-button type="primary" link icon="edit" @click="openYtgf(scope.row)">
                  以图管房
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card class="card">
        <template #header>
          <div class="flex">
            <div class="section-title">
              单位办公用房信息
            </div>
            <div class="btns">
              <div class="btn90" @click="openCb">
                超标信息
              </div>
            </div>
          </div>
        </template>
        <div class="icon-row">
          <div class="item" v-for="(item, i) in bgyfList" @click="openDraw(item)">
            <div class="item-left">
              <img :src="iconArr[i]" alt="" class="img">
            </div>
            <div class="item-right">
              <div class="label">{{ item.roomType }}:</div>
              <div class="value">{{ item.area }}&nbsp;㎡</div>
            </div>
          </div>
        </div>
        <div class="btns" style="margin-top: 30px;">
          <el-button type="primary" @click="dayin">打印PDF</el-button>
          <el-button type="primary" @click="openExport">导出国管数据报表</el-button>
          <el-button type="danger" @click="openHistory">历史数据对比</el-button>
        </div>
      </el-card>
    </div>
    <el-drawer v-model="dialog1" :size="1300" :before-close="handleClose1" :show-close="false" class="renyuan-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">人员信息</span>
          <div>
            <el-button @click="dialog1 = false">取消</el-button>
          </div>
        </div>
      </template>
      <div class="top">
        <div class="section-title"><span>人员清单</span><span class="tips">( 人数合计： <span>{{ total }}</span> 人 )</span></div>
        <div class="search">
          <el-form :inline="true">
            <el-form-item label="姓名">
              <el-input v-model="rySearchInfo.name" style="width:170px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="房号">
              <el-input v-model="rySearchInfo.roomNo" style="width:170px" placeholder="请输入" />
            </el-form-item>
            <el-form-item style="margin-right: 0;">
              <el-button type="primary" icon="search" @click="onSubmit">
                查询
              </el-button>
              <el-button icon="refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table :data="ryData" row-key="id">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="姓名" prop="name"></el-table-column>
        <el-table-column align="left" label="职级" prop="rank"></el-table-column>
        <el-table-column align="left" label="人员身份" prop="identity">
          <template #default="scope">
            {{ identitys[scope.row.identity - 1].name }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="部门" prop="departName"></el-table-column>
        <el-table-column align="left" label="职务" prop="job"></el-table-column>
        <el-table-column align="left" label="房名/房号" prop="roomNo"></el-table-column>
        <el-table-column align="left" label="房间面积" prop="roomArea"></el-table-column>
        <el-table-column align="left" label="超标面积" prop="exceedArea"></el-table-column>
        <el-table-column align="left" label="房间人数" prop="roomMembers"></el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next"
          @current-change="handleCurrentChange" />
      </div>
    </el-drawer>

    <el-drawer v-model="dialog3" :size="1300" :before-close="handleClose3" :show-close="false" class="renyuan-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">办公用房详情</span>
          <div>
            <el-button @click="dialog3 = false">取消</el-button>
          </div>
        </div>
      </template>
      <div class="title">各类型用房超标情况分析统计表</div>
      <el-table :data="cbData">
        <el-table-column align="left" label="用房类型" prop="roomType"></el-table-column>
        <el-table-column align="left" label="实际使用面积" prop="realArea"></el-table-column>
        <el-table-column align="left" label="核定面积" prop="approveArea"></el-table-column>
        <el-table-column align="left" label="超标面积" prop="exceedArea"></el-table-column>
      </el-table>
      <div style="margin: 26px 0 6px 0;">超标原因： </div>
      <el-input :value="cbData[0]?.notes || ''" type="textarea" :rows="8" disabled></el-input>
    </el-drawer>

    <el-drawer v-model="dialog4" :size="appStore.drawerSize" :before-close="handleClose4" :show-close="false"
      class="baobiao-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">导出国管数据报表</span>
          <div>

          </div>
        </div>
      </template>
      <div class="content">
        <div class="flex">
          <div>行政区划：</div>
          <el-cascader style="width: 400px;" :options="areaList" :props="props1" v-model="exportAreaId"
            @change="exportAreaChange" />
        </div>
        <div class="btns">
          <el-button type="primary" @click="confirmExport">
            导出
          </el-button>
          <el-button @click="closeExport">
            关闭
          </el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer v-model="dialog5" :size="1300" :before-close="handleClose5" :show-close="false" class="renyuan-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">历史数据对比</span>
          <div>
            <el-button @click="dialog5 = false">取消</el-button>
          </div>
        </div>
      </template>
      <div class="section-title">历史数据对比表</div>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="年份选择">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item in yearList" :label="item" :value="item" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item style="margin-right: 0;">
            <el-button type="primary" @click="onSubmit">
              对比
            </el-button>
            <el-button @click="onReset">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <el-table :data="bglData1" border :span-method="mergeCells">
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名">
          </el-table-column>
          <el-table-column prop="amount1" sortable label="数值 1">
          </el-table-column>
          <el-table-column prop="amount2" sortable label="数值 2">
          </el-table-column>
          <el-table-column prop="amount3" sortable label="数值 3">
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>

    <el-drawer v-model="dialog6" :size="1000" :before-close="handleClose6" :show-close="false" class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">办公室面积</span>
          <div>
            <el-button @click="closeDialog6">取消</el-button>
          </div>
        </div>
      </template>
      <div class="section-title" v-if="yfInfo && yfInfo.realArea">办公室用房信息 ( 办公室用房使用面积：{{ yfInfo.realArea }}平方米
        办公室用房核定面积：{{ yfInfo.approveArea }}平方米 办公室用房超标面积：{{ yfInfo.exceedArea }}平方米 )</div>
      <div class="bgl" v-if="bglData.length > 0">
        <div v-for="(item, index) in bglData" :class="currentIndex == index ? 'tab active' : 'tab'"
          @click="changeTab(item, index)">{{ item.name }}</div>
      </div>
      <div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);border:1px solid #e6e6e6;">
        <div class="floors" v-if="bglData.length > 0">
          <div v-for="(item, index) in bglData[currentIndex].floors"
            :class="currentFloor == index ? 'floor active' : 'floor'" @click="changeFloor(item, index)">{{
              item.floor }}</div>
        </div>
        <el-table :data="bgsRooms" row-key="id">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column align="left" label="房号/房名" prop="roomNo">
          </el-table-column>
          <el-table-column align="left" label="房间面积" prop="area"></el-table-column>
          <el-table-column align="left" label="人员姓名" prop="name"></el-table-column>
          <el-table-column align="left" label="职级" prop="rank"></el-table-column>
          <el-table-column align="left" label="职务" prop="job"></el-table-column>
          <el-table-column align="left" label="核定面积" prop="approveArea"></el-table-column>
          <el-table-column align="left" label="超标面积" prop="exceedArea"></el-table-column>
        </el-table>
      </div>
    </el-drawer>

    <el-drawer v-model="dialog7" :size="1000" :before-close="handleClose7" :show-close="false" class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ yfTitle }}面积</span>
          <div>
            <el-button @click="closeDialog7">取消</el-button>
          </div>
        </div>
      </template>
      <div class="section-title" v-if="yfInfo && yfInfo.realArea">
        <span>{{ yfTitle }}</span>
        信息(
        {{ yfTitle }}使用面积：
        <span>{{ yfInfo.realArea || 0 }}</span>
        平方米{{ yfTitle }}核定面积：
        <span> {{ yfInfo.approveArea || 0 }}</span>
        平方米 {{ yfTitle }}超标面积：
        <span> {{ yfInfo.exceedArea || 0 }}</span>
        平方米 )
      </div>
      <el-table :data="otherRooms" row-key="id">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="房号/房名" prop="roomNo"></el-table-column>
        <el-table-column align="left" label="房间类型" prop="roomTypeSec"></el-table-column>
        <el-table-column align="left" label="房间面积" prop="area"></el-table-column>
        <el-table-column align="left" label="备注" prop="notes"></el-table-column>
      </el-table>
    </el-drawer>

    <el-drawer v-model="dialog8" :size="1000" :before-close="handleClose8" :show-close="false" class="loudong-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">三定方案人数</span>
          <div>
            <el-button @click="closeDialog8">取消</el-button>
          </div>
        </div>
      </template>
      <div class="section-title">
        三定方案编制人员 (人数合计：
        <span>{{ unitInfo.thirdNums }}</span>
        人)
      </div>
      <el-table :data="sdData" border>
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="职级名称" prop="rank"></el-table-column>
        <el-table-column align="left" label="三定方案人数" prop="numbers"></el-table-column>
        <el-table-column align="left" label="核定面积" prop="area"></el-table-column>
      </el-table>
      <div class="section-title">
        实有人员 (人数合计：
        <span>{{ unitInfo.realNums }}</span>
        人)
      </div>
      <el-table :data="syData" border>
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="职级名称" prop="rank"></el-table-column>
        <el-table-column align="left" label="三定方案人数" prop="numbers"></el-table-column>
        <el-table-column align="left" label="核定面积" prop="area"></el-table-column>
      </el-table>
    </el-drawer>
    <ldCard ref="cardRef"></ldCard>
    <ytgf ref="ytgfRef"></ytgf>
  </div>
</template>
<script setup>
import {
  unitBaseInfo,
  unitRoomArea,
  unitEmployee
} from '@/api/chaxuntongji'
import {
  getDyList
} from '@/api/xitongpeizhi'
import {
  getUnitList,
  getRegionList,
  unitRooms,
  unitBuildingById,
  unitRoomExceed,
  roomDetail,
  unitStaffById,
  unitPdf,
  dataReport,
  dataContrast
} from '@/api/unit'
import { qsdjList } from '@/utils/constant'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { identitys } from '@/utils/constant'
import ldCard from '@/components/ldCard.vue'
import ytgf from '@/components/ytgf.vue'
// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()
const cardRef = ref(null)

function openCard(row){
  if(cardRef.value){
    cardRef.value.openCard(row)
  }
}
const ytgfRef = ref(null)

function openYtgf(row){
  if(ytgfRef.value){
    ytgfRef.value.openCard(row,'buildingId')
  }
}
defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()
const form = ref({
  ico: '',
  jumpType: '',
  jumpUrl: '',
  name: '',
  type: ''
})
const props1 = {
  checkStrictly: true,
  label: 'name',
  value: 'id'
}
const unitName = ref('')
const searchPids = ref([])
const areaList = ref([])
const units = ref([])
const defaultProps = {
  children: 'children',
  label: 'name',
}
const searchInfo = ref({
  regionId:'',
  unitId: '',
  name:''
})
const getUnitData = () => {
  getUnitList({ ...searchInfo.value }).then(res => {
    units.value = res.result
    searchInfo.value.unitId = units.value[0].id
    // units.value.length > 0 && getUnitInfo(units.value[0].id)
    units.value.length > 0 && getUnitInfo()
  })
}
function searchUnit(){
  getUnitData()
}
onMounted(() => {
  getRegionList().then(res => {
    areaList.value = res.result
  })
  getUnitData()
  // unitRooms().then(res=>{

  // })
})
const userStore = useUserStore()

const dialog1 = ref(false)

const bglData1 = ref(
  [{
    id: '后勤部门',
    name: '陈总',
    amount1: '234',
    amount2: '3.2',
    amount3: 10
  }, {
    id: '后勤部门',
    name: '陈总',
    amount1: '165',
    amount2: '4.43',
    amount3: 12
  }, {
    id: '后勤部门',
    name: '王小虎',
    amount1: '324',
    amount2: '1.9',
    amount3: 9
  }, {
    id: '人力党务部',
    name: '王小虎',
    amount1: '621',
    amount2: '2.2',
    amount3: 17
  }
    , {
    id: '人力党务部',
    name: '老实说',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
    , {
    id: '人力党务部',
    name: '老实说',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
    , {
    id: '人力党务部',
    name: '老实说',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
    , {
    id: '人力党务部',
    name: '王小虎',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
    , {
    id: '政企信息化',
    name: '我来了',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
    , {
    id: '政企信息化',
    name: '王小虎',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
  ]
)
const spanArr = ref([])

const searchAreaChange = (val) => {
  searchInfo.value.regionId = val[val.length-1]
  getUnitData()
}
const exportAreaId = ref([])
const regionId = ref('')
const exportAreaChange = (val) => {
  console.log(val,'vbvb')
  regionId.value = val[val.length - 1]
}
function closeExport(){
  exportAreaId.value=[]
  dialog4.value = false
}
function confirmExport() {
  dataReport(regionId.value,{unitId:searchInfo.value.unitId}).then(res => {
    const url = res.result; // 例如: 'https://example.com/path/to/your/excel/file.xlsx'
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.xlsx'); // 设置下载文件的名称
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 清理DOM
    ElMessage({
      type: 'success',
      message: '导出成功!'
    })
  })
}
// 表格合并处理 
function getSpanArr() {
  // 当前遍历到第几行
  let pos = 0
  // 初始化spanArr，否则切换表格数据时，spanArr会累加
  spanArr.value = []
  for (let i = 0; i < bglData1.value.length; i++) {
    if (i === 0) {
      spanArr.value.push(1)
      pos = 0
    } else {
      if (bglData1.value[i].id === bglData1.value[i - 1].id) {
        spanArr.value[pos] += 1
        spanArr.value.push(0)
      } else {
        spanArr.value.push(1)
        pos = i
      }
    }
  }
}
getSpanArr()

const mergeCells = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    let r = spanArr.value[rowIndex]
    let c = spanArr.value[rowIndex] > 0 ? 1 : 0
    return [r, c];
  }
}

const isEdit = ref(false)
const dialogTitle = ref('人员清单')
const addUnit = () => {
  dialogTitle.value = '人员清单'
  isEdit.value = false
  getRyData()
  dialog1.value = true
}

const handleClose1 = (done) => {
  dialog1.value = false
}

const dialog3 = ref(false)
const cbData = ref([])
const handleClose3 = (done) => {
  dialog3.value = false
}
function openCb() {
  unitRoomExceed(searchInfo.value.unitId).then(res => {
    cbData.value = res.result
    dialog3.value = true
  })
}
const dialog4 = ref(false)
const handleClose4 = (done) => {
  dialog4.value = false
}
const dialog5 = ref(false)
const handleClose5 = (done) => {
  dialog5.value = false
}
const checkList = ref([])
const yearList = ref(['2025', '2024', '2023', '2022', '2021', '2020', '2019'])
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const handleCurrentChange = (val) => {
  page.value = val
  getRyData()
}
const bglData = ref([])
const currentIndex = ref(0)
const currentFloor = ref(0)
function changeTab(item, index) {
  currentIndex.value = index
  floorId.value = bglData.value[currentIndex.value].floors[currentFloor.value].id
  getRoomArea()
}
function changeFloor(item, index) {
  currentFloor.value = index
  floorId.value = bglData.value[currentIndex.value].floors[currentFloor.value].id
  getRoomArea()
}
const bgsRooms = ref([])
function getRoomArea() {
  unitRoomArea(searchInfo.value.unitId, floorId.value).then(res => {
    if (res.result) {
      res.result.forEach(item => {
        if (item.employees) {
          item.employees.forEach(m => {
            bgsRooms.value.push({ ...item, ...m })
          })
        } else {
          bgsRooms.value.push(item)
        }
      })
    } else {
      bgsRooms.value = []
    }
  })
}
const iconArr = ref([
  "http://warehouse-api.lanbeiduo.com/api/file/download/w1MmcnJL1u_yf-1.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/Nlqb9cs1b2_yf-2.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/zjBMbMhsYc_yf-3.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/H1ibpJu14u_yf-4.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/qQvVLgkxfh_yf-5.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/ibzlmnUdII_yf-8.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/Nlqb9cs1b2_yf-2.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/Y6MUQWLvQ6_yf-6.png",
  "http://warehouse-api.lanbeiduo.com/api/file/download/H1ibpJu14u_yf-4.png",
])

const dialog6 = ref(false)
const fjData = ref([])
function handleClose6() {
  bgsRooms.value = []
  dialog6.value = false
}
function closeDialog6() {
  bgsRooms.value = []
  dialog6.value = false
}

const editUnit = async (row) => {

}

const onSubmit = () => {
  page.value = 1
  getRyData()
}

const onReset = () => {
  rySearchInfo.value = {
    unitId: '',
    name: '',
    roomNo: ''
  }
  getRyData()
}
const unitInfo = ref({})
const rySearchInfo = ref({
  unitId: '',
  name: '',
  roomNo: ''
})
const lbList = ref([])
const bgyfList = ref([])
const floorId = ref('')
function nodeClick(val) {
  searchInfo.value.unitId = val.id
  getUnitInfo()
}
function getUnitInfo() {
  let id = searchInfo.value.unitId
  unitBaseInfo(id).then(res1 => {
    getDyList({ pageNumber: 1, pageSize: 100 }).then(res2 => {
      unitInfo.value = res1.result
      lbList.value = res2.result.data.filter(item => item.type == 2)
      unitInfo.value.unitTypeNmae = lbList.value.find(m => m.id == res1.result.unitType).name
    })
  })
  unitBuildingById(id).then(res => {
    bglData.value = res.result || []
    if (bglData.value.length > 0) {
      let floors = bglData.value[currentIndex.value].floors
      if (floors.length > 0) {
        floorId.value = floors[0].id
      }
    }
  })
  unitRooms(id).then(res => {
    bgyfList.value = res.result
  })
  rySearchInfo.value.unitId = id
}

const ryData = ref([])
async function getRyData() {
  const res = await unitEmployee({
    pageNumber: page.value,
    pageSize: pageSize.value,
    ...rySearchInfo.value
  })
  if (res.code == 200) {
    ryData.value = res.result.data
    total.value = res.result.total
  }
}
const dialog7 = ref(false)
const yfInfo = ref({})
const otherRooms = ref([])
const yfTitle = ref('')
function openDraw(item) {
  unitRoomExceed(searchInfo.value.unitId).then(res => {
    cbData.value = res.result
    yfInfo.value = res.result.find(m => m.roomType == item.roomType)
  })
  if (item.roomType == '办公室') {
    getRoomArea()
    dialog6.value = true
  } else {
    yfTitle.value = item.roomType
    getOtherRooms(item.roomTypeInt)
    dialog7.value = true
  }
}

function getOtherRooms(roomTypeInt) {
  let params = {
    roomTypeInt: roomTypeInt,
    unitId: searchInfo.value.unitId
  }
  roomDetail(params).then(res => {
    otherRooms.value = res.result
  })
}

function handleClose7() {
  otherRooms.value = []
  dialog7.value = false
}
function closeDialog7() {
  otherRooms.value = []
  dialog7.value = false
}
const dialog8 = ref(false)
const sdData = ref([])
const syData = ref([])
function openBz() {
  unitStaffById(searchInfo.value.unitId).then(res => {
    sdData.value = res.result.filter(item => item.type == 1)
    syData.value = res.result.filter(item => item.type == 2)
    dialog8.value = true
  })
}
function handleClose8() {
  dialog8.value = false
}
function closeDialog8() {
  dialog8.value = false
}
function dayin() {
  unitPdf({unitId:searchInfo.value.unitId}).then(res => {
    //const url = res.result;
    window.open(res.result)
    // const x = new window.XMLHttpRequest();
    // x.open('GET', url, true);
    // x.responseType = 'blob';
    // x.onload = () => {
    //   const url = window.URL.createObjectURL(x.response);
    //   const a = document.createElement('a');
    //   a.href = url;
    //   a.download = '办公用房信息';
    //   a.click();
    // };
    // x.send();
  })
}

function openExport() {
  dialog4.value = true
}
function openHistory() {
  dataContrast({unitId:searchInfo.value.unitId}).then(res=>{

  })
  dialog5.value = true
}
</script>

<style lang="scss">
.main {
  display: flex;
  height: 100%;

  //padding: 10px;
  .left {
    flex: 1;
    background-color: #fff;
    margin-right: 6px;

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;

      .label {
        margin-right: 6px;
      }
    }

    .units {
      margin: 10px 0;

      .item {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-bottom: 4px;

        .icon {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .name {
          margin-left: 6px;
        }
      }
    }
  }

  .right {
    flex: 5;
    overflow-y: auto;
    height: calc(100vh - 4rem);

    .section-title {
      font-weight: bold;
      font-size: 18px;
      line-height: 33px;
      padding-left: 14px;
      color: #4E7DF7;
      position: relative;
    }

    .section-title:before {
      content: '';
      position: absolute;
      top: 10px;
      left: 0;
      width: 6px;
      height: 14px;
      border-radius: 3px;
      background: #4E7DF7;
    }

    .card {
      margin-bottom: 10px;

      .table {
        width: 100%;
      }

      .btns {
        display: flex;
        justify-content: center;
      }

      .row {
        display: flex;
        margin-bottom: 10px;

        .item {
          width: 50%;
          display: flex;

          .label {
            color: #666;
          }

          .status1 {
            background: #f8fcff;
            color: #698be0;
            font-size: 12px;
            width: 60px;
            height: 18px;
            text-align: center;
            border: 1px solid #698be0;
            display: inline-block;
            border-radius: 4px;
            margin-left: 5px;
          }

          .status2 {
            background: #f8fcff;
            color: #ff3a2b;
            font-size: 12px;
            width: 60px;
            height: 18px;
            text-align: center;
            border: 1px solid #fa6081;
            display: inline-block;
            border-radius: 4px;
            margin-left: 5px;
          }
        }
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btns {
          display: flex;
        }

        .btn90 {
          font-size: 16px;
          padding-left: 10px;
          padding-right: 10px;
          height: 36px;
          line-height: 36px;
          cursor: pointer;
          border: 1px solid #698be0;
          background: #f8fcff;
          color: #698be0;
          border-radius: 4px;
          margin-left: 4px;
        }
      }

      .icon-row {
        display: flex;
        margin-bottom: 16px;
        flex-wrap: wrap;

        .item {
          width: 30%;
          margin-right: 3%;
          display: flex;
          align-items: center;
          border: 1px solid #e8e8e8;
          margin-bottom: 10px;
          cursor: pointer;

          .item-left {
            width: 100px;
            height: 80px;
            background: #698be0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;

            .img {}
          }

          .item-right {
            display: flex;

            .label {
              margin-right: 10px;
            }

            .value {
              color: #4E7DF7;
            }
          }
        }
      }
    }
  }

  .renyuan-drawer {
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;


      .el-form-item {
        margin-bottom: 0;
        margin-left: 10px;
      }
    }

    .section-title {
      font-weight: bold;
      font-size: 18px;
      line-height: 33px;
      padding: 4px 0 4px 14px;
      color: #4E7DFD;
      position: relative;

      .tips {
        margin: 0 50px 0 10px;
        font-weight: normal;
        font-size: 16px;
        color: #606266;

        span {
          color: #4E7DFD;
        }
      }
    }

    .section-title:before {
      content: '';
      position: absolute;
      top: 12px;
      left: 0;
      width: 6px;
      height: 14px;
      border-radius: 3px;
      background: #4E7DFD;
    }

    .title {
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }
  }

  .baobiao-drawer {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
    }

    .flex {
      display: flex;
      align-items: center;
    }

    .btns {
      margin-top: 20px;
    }
  }
}

.gva-container2 {
  height: 100%;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.loudong-drawer {
  .bgl {
    background: #edf3fa;
    display: flex;

    .tab {
      color: #999;
      cursor: pointer;
      padding: 10px;
    }

    .active {
      color: #fff;
      background: #508ee5;
      padding: 10px;
      display: inline-block;
    }
  }

  .bgl-info {
    display: flex;
    margin: 14px 0;

    .item {
      display: flex;
      margin-right: 20px;
    }

    .label {}

    .value {
      color: #ffa200;
      margin-left: 10px;
    }
  }

  .floors {
    display: flex;
    background-color: #f2f2f2;

    .floor {
      padding: 10px 14px;
      cursor: pointer;
    }

    .active {
      background-color: #fff
    }
  }

  .section-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 33px;
    padding: 8px 0 4px 14px;
    color: #4E7DFD;
    border-bottom: 1px solid #E7ECF1;
    position: relative;
    margin-bottom: 20px;
  }

  .section-title:before {
    content: '';
    position: absolute;
    top: 17px;
    left: 0;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #4E7DFD;
  }
}
</style>
